<template>
	<view>
		<!-- 姓名 -->
		<view class="x lll">
			<p class="aaa">姓名</p>
			<input type="text" placeholder="收货人姓名" class="yang" v-model="from.name" />
		</view>
		<!-- 电话 -->
		<view class="x lll">
			<p class="aaa">电话</p>
			<input type="text" placeholder="收货人电话" class="yang" v-model="from.tel" />
		</view>
		<!-- 地区 -->
		<view class="x ll1">
			<p class="aa1">地区</p>
			<!-- from.province+from.city+from.county -->
			<picker mode="region" @change="change" class="yang">{{from.province+from.city+from.county || '省市区选择器' }}
			</picker>
			<image src="../../static/尖括号.png" class="tu" @click="di"></image>
		</view>
		<!-- 详细地址 -->
		<view class="x ll2">
			<p class="aaa">详细地址</p>
			<input type="text" placeholder="街道门牌、楼层房间号等信息" class="yang" v-model="from.addressDetail" />
		</view>
		<!-- 设为默认地址 -->
		<view class="x llp">
			<p class="aaa">设为默认地址</p>
			<switch color="#55ffff" @change="button" :checked="from.isDefaults"></switch>
		</view>

		<button class="anniu" style="background-color:crimson;" @click="save">保存</button>
		<view v-if="from.id != '' ">
			<button class="anniu" @click="Delete">删除</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				add: [],
				from: {
					id: '',
					province: '',
					city: '',
					county: '',
					//region: '', //城市选择
					name: '', //收货人名字
					tel: '', //收货人的手机号
					addressDetail: '', //详细地址
					isDefault: '' //是否设为默认地址
				}
			}
		},
		onLoad(obj) {
			// console.log(obj)
			// debugger
			// const item = JSON.parse(decodeURIComponent(obj.item));
			if (obj.item) {
				const item = JSON.parse(decodeURIComponent(obj.item));
				this.from = item;
			}
			// console.log(item);
			// this.from = item;
		},
		methods: {
			// 默认收货地址
			button: function(e) {
				let value = e.detail.value
				this.from.isDefault = value
			},
			change: function(event) {
				// 打印是否拿到数据
				// console.log(this.from)
				const {
					value
				} = event.detail;
				// debugger
				// 简便地写法
				// this.from.region = value.join('-');
				this.from.province = value[0];
				this.from.city = value[1];
				this.from.county = value[2];


			},
			// 定位
			// di() {
			// 	uni.chooseLocation({
			// 		success: function(res) {
			// 			console.log('位置名称：' + res.name);
			// 			console.log('详细地址：' + res.address);
			// 			console.log('纬度：' + res.latitude);
			// 			console.log('经度：' + res.longitude);
			// 		},
			// 		fail(res) {
			// 			console.log(res)
			// 		}
			// 	});
			// },
			//保存
			save() {
				if (this.from.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写姓名'
					})
				} else if (this.from.tel.length != 11) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的手机号'
					})
				} else if (this.from.province == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的省/市/区地址'
					})
				} else if (this.from.city == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的省/市/区地址'
					})
				} else if (this.from.county == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的省/市/区地址'
					})
				} else if (this.from.addressDetail == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的详细地址'
					})
				} else if (this.from.isDefault == '') {
					uni.showToast({
						icon: 'none',
						title: '默认地址未打开'
					})
				} else {
					this.$api.post('/wx/address/save', this.from).then(res => {
						// console.log(res)
						// debugger
						uni.showToast({
							title: '添加成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
				}
			},
			Delete() {
				this.$api.POST('/wx/address/delete', this.from).then(res => {
					uni.showModal({
						title: '提示',
						content: '你确定要删除吗',
						success: function(res) {
							if (this.from === null) {
								uni.showToast({
									icon: 'none',
									title: '删除失败',
								})
							} else {
								uni.showToast({
									title: '删除成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						}
					})
				})
			}
		}
	}
</script>

<style>
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	.lll {
		margin-top: 10rpx;
		width: 600rpx;
		margin-left: 20rpx;
	}

	.llp {
		margin-top: 10rpx;
		width: 600rpx;
	}

	.aaa {
		margin: 0 auto;
		padding-bottom: 20rpx;
		color: black;
	}

	.yang {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		width: 400rpx;
		margin-left: 20rpx;

	}

	.jian {
		width: 40rpx;
		height: 40rpx;
	}

	.anniu {
		margin-top: 20rpx;
		width: 600rpx;
		border-radius: 40px;
		/* 圆角 */
		border-style: solid;
		/* 设置边框 */
		border-width: 0.5px;
		/* 边框粗细 */
		border-color: #d2d2d2;
	}

	.tu {
		width: 50rpx;
		height: 50rpx;
	}

	.aa1 {
		padding-bottom: 20rpx;
		margin-left: 60rpx;
	}

	.ll1 {
		margin-top: 10rpx;
		width: 600rpx;
	}

	.ll2 {
		margin-top: 10rpx;
		width: 590rpx;
	}
</style>